<template>
	<view class="station-detail-container">
		<!-- <template v-if="station_item"> -->
		<navBar v-if="JSON.stringify(list) !== '{}'" :title="list.stationEntity.stationName" left-icon="back"
			:isBackGround="true" @onLeftIcon="onLeftIcon"></navBar>
		<!-- </template> -->
		<!-- 内容 -->
		<view class="content">
			<view class="top-content">
				<view class="top-tag">
					<view class="left-tag">
						<!-- 无报警 -->
						<view class="status-item" v-if="!stationItem.alarm">
							<text class="green-bg icon-bg">
								<text class="iconfont icon-duigou"></text>
							</text>
							<text class="">无报警</text>
						</view>
						<!-- 有报警 -->
						<view class="status-item" v-if="stationItem.alarm > 0">
							<text class="icon-bg yellow-bg">
								<text class="iconfont icon-baojingzhiwen"></text>
							</text>
							<text class="">报警</text>
						</view>
						<!-- 正常 -->
						<view class="status-item" v-if="stationItem.com == 1">
							<text class="green-bg icon-bg">
								<text class="iconfont icon-duigou"></text>
							</text>
							<text class="">通讯正常</text>
						</view>
						<!-- 部分设备离线 -->
						<view class="status-item" v-if="stationItem.com == 2">
							<text class="yellow-bg icon-bg">
								<text class="iconfont">!</text>
							</text>
							<text class="">部分设备离线</text>
						</view>
						<!-- 全部设备离线 -->
						<view class="status-item" v-if="stationItem.com == 3">
							<text class="icon-bg red-bg">
								<text class="iconfont icon-hengxian"></text>
							</text>
							<text class="">全部设备离线</text>
						</view>
						<!-- 接入中 -->
						<view class="status-item" v-if="stationItem.com == 4">
							<text class="yellow-bg icon-bg">
								<text class="iconfont icon-shizhong"></text>
							</text>
							<text class="">接入中</text>
						</view>
					</view>
				</view>
				<!-- <view class="top-label" v-if="JSON.stringify(list) !== '{}' && list.stationEntity.labelEntities.length > 0 ">
					<text class="active" v-for="item in list.stationEntity.labelEntities" :key="item.id">{{ item.labelName }}</text>
				</view> -->
				<view class="tabs">
					<scroll-view class="control" scroll-x="true" scroll-left="120">
						<view style="width: 100%">
							<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#3f8cf7"></uni-segmented-control>
						</view>
					</scroll-view>
					<view class="content">
						<!-- 数据看板 -->
						<view v-show="current === 0" class="dashboard">
							<!-- <uni-notice-bar show-close single text="点击了解部分数据更新快,部分数据更新慢的原因." /> -->
							<view class="lunbo">
								<swiper class="swiper" circular indicator-dots @change="changeSwiper">
									<!-- 流动图 -->
									<swiper-item>
										<view class="swiper-item" v-if="JSON.stringify(list) !== '{}'">
											<flow1 v-if="list.stationEntity.systemType === 1"
												:capacity="list.stationEntity.capacity"
												:allActivePower="list.allActivePower" :rfpFKwh="list.rfpFKwh"
												:allPower="list.allPower" />
											<flow2 v-if="list.stationEntity.systemType === 2"
												:capacity="list.stationEntity.capacity"
												:allActivePower="list.allActivePower" :rfpFKwh="list.rfpFKwh"
												:allPower="list.allPower" :fpFKwh="list.fpFKwh" />
											<flow3 v-if="list.stationEntity.systemType === 3"
												:capacity="list.stationEntity.capacity"
												:allActivePower="list.allActivePower" :rfpFKwh="list.rfpFKwh"
												:allPower="list.allPower" />
										</view>
									</swiper-item>
									<!-- 发电实时 -->
									<swiper-item>
										<view class="swiper-item" v-if="JSON.stringify(list) !== '{}'">
											<GeneratePower :allActivePower="list.allActivePower"
												:capacity="list.stationEntity.capacity" :dayPower="list.dayPower"
												:monthPower="list.monthPower" :yearPower="list.yearPower"
												:allPower="list.allPower" />
										</view>
									</swiper-item>
									<!-- 用电实时 -->
									<!-- 电网实时 -->
									<!-- <swiper-item>
										<view class="swiper-item" v-if="JSON.stringify(list) !== '{}'">
											<PowerNet v-if="currenSwiper == 2" :rfpFKwh="list.rfpFKwh"
												:fpFKwh="list.fpFKwh" :allPower="list.allPower" />
										</view>
									</swiper-item> -->
									<!-- 电池实时 -->
								</swiper>
							</view>
							<!-- 日 月 年 图表 -->
							<charts v-if="JSON.stringify(list) !== '{}'" :did="list.stationEntity.id" :type="3" />
							<!-- 节能减排及收入 -->
							<view class="de-energy">
								<view class="title">
									<text>节能减排及收入</text>
									<text class="iconfont icon-yiwen" @click="openDesc"></text>
								</view>
								<view class="content">
									<view class="content-item">
										<view class="left">
											<text class="icon">
												<text class="iconfont icon-pingpo"></text>
											</text>
											<text>节约标准煤</text>
										</view>
										<view class="right">
											<text>{{(list.allPower * 0.000305).toFixed(2) || "--"}}</text>
											<text class="energy-unit">吨</text>
										</view>
									</view>
									<view class="content-item">
										<view class="left">
											<text class="icon">
												<text class="iconfont icon-CO"></text>
											</text>
											<text>CO2减排量</text>
										</view>
										<view class="right">
											<text>{{(list.allPower * 0.000793).toFixed(2) || "--" }}</text>
											<text class="energy-unit">吨</text>
										</view>
									</view>
									<view class="content-item">
										<view class="left">
											<text class="icon">
												<text class="iconfont icon-songshu"></text>
											</text>
											<text>等效植树量</text>
										</view>
										<view class="right">
											<text>{{((list.allPower * 0.997) / 18.3).toFixed(2) || "--"}}</text>
											<text class="energy-unit">棵</text>
										</view>
									</view>
									<view class="content-item">
										<view class="left">
											<text class="icon">
												<text class="iconfont icon-qiandai"></text>
											</text>
											<text>累计收入</text>
										</view>
										<view class="right" v-if="JSON.stringify(list) !== '{}'">
											<text>{{(list.allPower * list.stationEntity.unitPrice).toFixed( 2 ) || "--" }}</text>
											<text class="energy-unit">MAUD</text>
										</view>
									</view>
								</view>
								<uni-popup ref="popup_energy" type="center" :mask-click="false">
									<view class="popup-energy-container">
										<view class="popup-content">
											<view class="popup-title">节能减排及收入</view>
											<view class="item">节约标准煤（吨）=
												0.000305*累计发电量（KWh），数据来自国家发改委</view>
											<view class="item">CO₂减排量（吨）=
												0.000793*累计发电量（KWh），数据来自国家生态环境部</view>
											<view class="item">等效植树量（棵）=
												累计发电量（KWh）*0.997/18.3，即1年内需要种多少棵树才能吸收掉CO₂减排量中的所有CO₂，数据来自IPCC</view>
											<view class="item">累计收入=度电收益*累计发电量（KWh）</view>
										</view>
										<view class="btn" @click="closeDesc">我知道了</view>
									</view>
								</uni-popup>
							</view>
						</view>
						<!-- 设备 -->
						<view v-if="current === 1" class="devices">
							<equipment :refresh="refresh" :reach="reach" :pushCurrent="pushCurrent" :flag="flag" :stationId="stationId" />
						</view>
						<!-- 报警 -->
						<view v-show="current === 2" class="alarm">
							<warnContent station />
						</view>
						<!-- 关于电站 -->
						<view v-if="current === 3" class="about">
							<AboutStation :station_id="list.stationEntity.id"
								:stationType="list.stationEntity.stationType"
								:systemType="list.stationEntity.systemType" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import equipment from '@/pages/tabbar/monitor/equipment/equipment.vue'
	import {
		getStationchild
	} from "@/common/api/api.js"
	import navBar from "@/components/navbar/index.vue"
	import GeneratePower from "@/pages/tabbar/monitor/components/swiperItem/GeneratePower.vue"
	import PowerNet from "@/pages/tabbar/monitor/components/swiperItem/PowerNet.vue"
	import CardList from "@/pages/tabbar/monitor/equipment/cardList.vue"
	import AboutStation from "./about/AboutStation.vue"
	import charts from "@/pages/deviceDetail/monitorDetail/charts.vue"
	import flow1 from "./comps/flow1.vue"
	import flow2 from "./comps/flow2.vue"
	import flow3 from "./comps/flow3.vue"
	import warnContent from "@/pages/tabbar/warn/warnContent.vue"
	export default {
		components: {
			navBar,
			GeneratePower,
			PowerNet,
			CardList,
			AboutStation,
			charts,
			flow2,
			flow3,
			flow1,
			warnContent,
			equipment
		},
		data() {
			return {
				stationId: '',//父组件传来的电站Id
				list: {},
				label_list: [], //label数组
				items: ["数据看板", "设备", "报警", "关于电站"],
				current: 0,
				currenSwiper: 0,
				stationItem: {}, //被打开页面传来数据
				reach: false,
				flag: 0, // 标志位从电站详情页进来的
				pushCurrent: 1,
				refresh: false, //下拉刷新状态,
			}
		},
		//上拉刷新操作
		onReachBottom() {
			this.reach = !this.reach
		},
		onLoad: function(option) {
			this.stationItem = option
			this.flag = option.flag
			this.stationId = option.id
			//option为object类型，会序列化上个页面传递的参数 id
			const token = uni.getStorageSync("Token")
			let params = {
				id: option.id,
				token,
			}
			this.get_dash_board(params)
		},
		methods: {
			// 获取看板数据
			async get_dash_board(params) {
				let res = await getStationchild(params)
				this.list = res.data
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			//返回
			onLeftIcon() {
				uni.navigateBack()
			},
			changeSwiper(e) {
				this.currenSwiper = e.detail.current
			},
			openDesc() {
				this.$refs.popup_energy.open("center")
			},
			closeDesc() {
				this.$refs.popup_energy.close()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.control {
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}
	}

	.popup-energy-container {
		width: 600rpx;
		background-color: #fff;
		border-radius: 10px;

		.btn {
			padding: 20rpx;
			text-align: center;
			border-top: 2rpx solid $border_bt;
		}

		.popup-content {
			height: 80%;
			padding: 20rpx;

			.popup-title {
				font-weight: bold;
				color: #000;
				text-align: center;
			}

			.item {
				margin-top: 20rpx;
			}
		}
	}

	.integer {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
	}

	.decimal {
		font-size: 24rpx;
	}

	.unit {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.energy-unit {
		margin-left: 10rpx;
	}

	.swiper {
		height: 700rpx;

		.swiper-item {
			height: 100%;
		}
	}

	/deep/.swiper .uni-swiper-dot {
		background-color: #eeeff0 !important;
		transition: all 0.3s;
	}

	/deep/.swiper .uni-swiper-dot-active {
		background-color: #068eff !important;
		width: 25px !important;
		border-radius: 20px !important;
	}

	.active {
		background-color: #edf5fe;
		color: #3f8cf7;
		font-size: 24rpx;
		border-radius: 100rpx;
		padding: 10rpx 20rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}

	.icon-bg {
		border-radius: 50%;
		margin: 0 10rpx;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		display: inline-block;

		.iconfont {
			font-size: 24rpx;
			color: #fff;
		}
	}

	.green-bg {
		background-color: #6ecd73;
	}

	.red-bg {
		background-color: #ee8079;
	}

	.yellow-bg {
		background-color: #f3b762;
	}

	.station-detail-container:after {
		content: "";
		height: 30rpx;
		display: inline-block;
	}

	.station-detail-container {
		background-color: $bg-color;
		color: $font_color;

		.top-content {
			// border: 1px solid;
			background: #fff;
			padding-top: 20rpx;

			.top-tag {
				display: flex;
				justify-content: space-between;
				margin: 0 40rpx;
				margin-bottom: 30rpx;

				.left-tag {
					width: 70%;
					display: flex;
					flex-wrap: wrap;
					font-size: 24rpx;
				}
			}

			.top-label {
				margin: 0 40rpx;
			}

			.tabs {
				margin-top: 20rpx;

				.segmented-control {
					padding: 0 40rpx;
				}

				.content {
					background-color: $bg-color;

					.dashboard {
						padding-top: 2rpx;

						.uni-noticebar {
							border: 2rpx solid rgb(255, 154, 67);
							padding: 10rpx;
							width: 95%;
							margin: 20rpx auto;
						}

						.lunbo {
							background: #fff;
							margin-bottom: 20rpx;
							margin-top: 20rpx;
						}

						.charts {
							background-color: #fff;

							.charts-content {
								background-color: #fff;
							}
						}

						.de-energy {
							background: #fff;
							margin-top: 20rpx;
							padding-bottom: 20rpx;

							.title {
								border-bottom: 2rpx solid $border_bt;
								margin-left: 40rpx;
								padding: 20rpx 0;
								font-weight: 600;

								.iconfont {
									margin-left: 10rpx;
								}
							}

							.content {
								padding: 0 40rpx;
								background: #fff;

								.content-item {
									display: flex;
									justify-content: space-between;
									margin-top: 30rpx;

									.icon {
										border-radius: 10rpx;
										// width: 32rpx;
										// height: 32rpx;
										text-align: center;
										line-height: 1;
										background-color: #3f8cf733;
										padding: 6rpx;
										display: inline-block;
										margin-right: 20rpx;

										.iconfont {
											color: #5786f4;
											font-size: 28rpx;
										}
									}
								}
							}
						}
					}

					.devices {
						padding-top: 2rpx;
					}

					.about {
						padding-top: 20rpx;
					}

					.authority {
						padding-top: 20rpx;
					}

					.alarm {
						padding: 40rpx 20rpx;

						/deep/.uni-card {
							margin: 20rpx 0 !important;
						}
					}
				}
			}
		}
	}
</style>
